<template>
  <div class="manage-kanban">
    <div class="kanban-left">
      <div class="card card-danger">
        111
      </div>
      <div class="card card-work">
        222
      </div>
      <div class="card card-area">
        444
      </div>
    </div>
    <div class="kanban-middle">
      <div class="card">
        555
      </div>
      <div class="card card-alarm" >
        666
      </div>
    </div>
    <div class="kanban-right">
      <div class="card card-kpi">
        777
      </div>
      <div class="card card-type">
        888
      </div>
      <div class="card card-trend">
        999
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'eduHome'
}
</script>

<style lang="scss" scoped>
.manage-kanban {
  display: flex;
  justify-content: center;
  // height: calc(100vh - 9rem);
  height: 100%;
  // min-height: 60rem;
  padding: 1.4rem 0 0;
  box-sizing: border-box;
  overflow: hidden;
  .card {
    padding-bottom: 0.8rem;
    box-sizing: border-box;
    color:white;
    // !! 可以在这里添加对应卡片的背景图片
    //background: url("./images/card1-bg.png");
    //background-size: 100% 100%;
  }
  .kanban-left {
    width: 26%;
    display: flex;
    flex-direction: column;
    position: relative;
    animation-name: left-in;
    animation-duration: 1.5s;
    transition-timing-function: linear;
    padding-right: 2rem;
    .card {
      width: 100%;
      flex: 3;
    }
    .card-danger {
      flex: 4;
    }
    .card-area {
      flex: 3;
      overflow: hidden;
      padding-bottom: 0 !important;
    }
  }
  .kanban-right {
    width: 26%;
    display: flex;
    flex-direction: column;
    position: relative;
    animation-name: right-in;
    animation-duration: 1.5s;
    transition-timing-function: ease-in;
    padding-left: 2rem;
    .card {
      flex: auto;
      border-radius: 1rem;
    }
    .card-kpi {
      flex: 4;
    }
    .card-type {
      flex: 3;
    }
    .card-trend {
      flex: 3;
      padding-bottom: 0;
    }
  }
  .kanban-middle {
    flex: auto;
    display: flex;
    flex-direction: column;
    .card {
      // height: 70%;
      position: relative;
      margin: 0 0.8rem;
      flex: 7;
      &:first-child {
        background: url("./images/map-bg.png");
        background-size: 100% 100%;
        overflow: hidden;
        padding: 1rem;
      }
    }
    .card-alarm {
      flex: 3;
      //min-height: 23rem;
      padding-top: 0;
      margin-top: 0.99rem;
      padding-bottom: 0.35rem;
      overflow: hidden;
    }
  }
}
@keyframes left-in {
  from {
    left: -26%;
  }
  to {
    left: 0;
  }
}
@keyframes right-in {
  from {
    left: 26%;
  }
  to {
    left: 0;
  }
}
</style>
